import React, { useState } from 'react';
import type { MenuProps } from 'antd';
import { ConfigProvider, Menu } from 'antd';
import { useLanguage } from '../../../hooks/uselang';
import { Link } from 'react-router';



const HeaderMenu: React.FC = () => {

type MenuItem = Required<MenuProps>['items'][number];

// uselanguage hooks
const {t}  = useLanguage();
const header = t()['home']['header']

const items: MenuItem[] = [
  {
    label: (
      <Link to={"/"}>
        {header.index}
      </Link>
    ),
    key: 'home',
  },
  {
    label:(
      <Link to={"/shoppingCar"}>
        {header.shoppingCar}
      </Link>
    ) ,
    key: 'news',
  },
  {
    label: header.resources,
    key: 'resources',
    children: [
      { label: header.book, key: 'book' },
      { label: header.shoppingCar, key: 'newspaper' },
      { label: header.paper, key: 'paper' },
      { label: header.digitai_resources, key: 'digitai_resources' },
      { label: header.image_resources, key: 'image_resources' }
    ],
  },
  {
    label: (
      <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
        {header.active}
      </a>
    ),
    key: 'active',
  },
];


  
  const [current, setCurrent] = useState('mail');

  const onClick: MenuProps['onClick'] = (e) => {
    setCurrent(e.key);
  };

  return (
    <div className='w-1/3 inline-block float-right my-2'>
    <ConfigProvider
      theme={{
        components:{
          Menu:{
            itemPaddingInline:20,
            itemColor:"#FFFFFF",
            itemBg:"transparent",
            itemSelectedColor:"#0066FF",
            horizontalItemSelectedColor:"#FFFFFF",
            popupBg:"#666666"
          }
        }
      }}  
    >
      <Menu style={{fontSize:20}} onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
    </ConfigProvider>
    </div>)
};

export default HeaderMenu;